<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>响应式布局Demo</title>
	<link rel="stylesheet" type="text/css" href="css/flexDemo.css"/>
</head>
<body>
	<header class="header">
		<h1>响应式页面布局框架制作</h1>
		<p>使用环境必须是支持HTML5+CSS3的浏览器。</p>
	</header>
	
	<nav class="navbar">
		<a href="#" target="_parent" class="navleft">首页</a>
		<a href="#" target="_parent" class="navleft">链接1</a>
		<a href="#" target="_parent" class="navleft">链接2</a>
		<a href="#" target="_parent" class="navleft">链接3</a>
		<a href="#" target="_parent" class="navleft">链接4</a>
		<a href="#" target="_parent" class="navright">用户中心</a>
	</nav>
	
	<section class="row">
		<!--h2{关于我们}+h5{我的照片}+div.fakeimg[style="height:200px"]{这边插入图像}+p{关于我们的介绍}+h3{更多内容}+p{我的更多内容}+div.fakeimg[style="height:60px"]{这边插入图像}*3-->		
		<div class="slide">
			<h2>关于我们</h2>
			<h5>我的照片</h5>
			<div class="fakeimg" style="height:200px">这边插入图像</div>
			<p>关于我们的介绍</p>
			<h3>更多内容</h3>
			<p>我的更多内容</p>
			<div class="fakeimg" style="height:60px">这边插入图像</div>
			<div class="fakeimg" style="height:60px">这边插入图像</div>
			<div class="fakeimg" style="height:60px">这边插入图像</div>
		</div>
		
		<!--div.main>h2{标题}+h5{副标题}+div.fakeimg[style="height:200px"]{图像}+p{一些文本}+p{菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！}+br+h2{标题}+h5{副标题}+div.fakeimg[style="height:200px"]+p{一些文本..}+p{菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！}-->
		<div class="main">
			<h2>标题</h2>
			<h5>副标题</h5>
			<div class="fakeimg" style="height:200px">图像</div>
			<p>一些文本</p>
			<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
			<br />
			<h2>标题</h2>
			<h5>副标题</h5>
			<div class="fakeimg" style="height:200px"></div>
			<p>一些文本..</p>
			<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
		</div>
	</section>
	
	<footer>
		<h2>底部内容</h2>
	</footer>
	https://www.runoob.com/try/demo_source/tryhtmlcss_website.htm<br />
	https://www.runoob.com/w3cnote/htmlcss-make-a-website.html<br />
	https://blog.csdn.net/zhihuiyu123/article/details/80745805
</body>
</html>